<template>
  <div class="anchor-more">
      <div class="title">
     <div><router-link to="/singerMore/allsinger">全部</router-link></div>
      <div><router-link to="/singerMore/mansinger">男歌手</router-link></div>
      <div><router-link to="/singerMore/womansinger">女歌手</router-link></div>
      </div>
      <router-view></router-view>
  </div>
</template>

<script>
// import Item from "./singerChildren/item/item.vue"
export default {
    // components:{
    //     Item
    // },
    data(){
        return{
            anchormore:[]
        }
    },
    mounted() {
        this.$http.get(`/artist/list?type=-1`).then(res=>{
           this.anchormore = res.data.artists
        })
    },
    methods:{
        handleDetail(val){
            console.log(val);
            this.$router.push(`/anchordetail?id=${val}`)
        }
    }
}
</script>

<style scoped>
.anchor-more {
  width: 1200px;
  margin: 0 auto;
  margin-top: 30px;
}
.title {
  display: flex;
  line-height: 30px;
  border-bottom: 3px solid #9bb1ff;
}
.title > div {
    margin-right: 30px;
}
.anchormore-conent {
    padding: 20px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.anchormore-item {
    margin-top: 30px;
    width: 250px;
    height: 350px;
}
.anchormore-item img {
    border-radius: 20px;
    width: 250px;
    height: 300px;
}
.anchormore-item p {
    margin-top: 20px;
}
.router-link-active {
    color: #fff;
    background-color: #9BB1FF;
}
</style>